import React from 'react';
import { usePermissions, Permission } from '@/hooks/usePermissions';
import { AlertCircle, Lock } from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';

interface PermissionGuardProps {
  permission?: Permission;
  permissions?: Permission[];
  requireAll?: boolean;
  fallback?: React.ReactNode;
  children: React.ReactNode;
}

export function PermissionGuard({
  permission,
  permissions,
  requireAll = false,
  fallback,
  children,
}: PermissionGuardProps) {
  const { hasPermission, hasAnyPermission, hasAllPermissions, userRole } = usePermissions();

  let hasAccess = false;

  if (permission) {
    hasAccess = hasPermission(permission);
  } else if (permissions) {
    hasAccess = requireAll ? hasAllPermissions(permissions) : hasAnyPermission(permissions);
  }

  if (!hasAccess) {
    return (
      fallback || (
        <div className="flex min-h-[400px] items-center justify-center">
          <Card className="w-full max-w-md">
            <CardHeader className="text-center">
              <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
                <Lock className="h-6 w-6 text-red-600" />
              </div>
              <CardTitle className="text-xl">Access Denied</CardTitle>
              <CardDescription>
                You don't have permission to access this resource.
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                <div className="rounded-lg bg-gray-50 p-3">
                  <div className="flex items-center space-x-2 text-sm text-gray-600">
                    <AlertCircle className="h-4 w-4" />
                    <span>Current Role: <strong>{userRole}</strong></span>
                  </div>
                </div>
                <div className="rounded-lg bg-blue-50 p-3">
                  <div className="text-xs text-blue-800">
                    <p><strong>Debug Info:</strong></p>
                    <p>Required: {permission ? permission : permissions?.join(', ')}</p>
                    <p>User permissions: {typeof hasPermission === 'function' ? 'function available' : 'none'}</p>
                    <p>Require all: {requireAll ? 'Yes' : 'No'}</p>
                  </div>
                </div>
                <div className="text-center">
                  <p className="text-sm text-gray-500">
                    Contact an administrator if you believe this is an error.
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      )
    );
  }

  return <>{children}</>;
}

// Convenience component for admin-only features
export function AdminGuard({ children, fallback }: { children: React.ReactNode; fallback?: React.ReactNode }) {
  return (
    <PermissionGuard
      permissions={[
        Permission.VIEW_DASHBOARD,
        Permission.MANAGE_USERS,
        Permission.MANAGE_MINERS,
        Permission.MANAGE_REFERRALS,
        Permission.MANAGE_DTVC,
        Permission.MANAGE_ANNOUNCEMENTS,
        Permission.MANAGE_VESTING,
        Permission.VIEW_BLOCKCHAIN,
        Permission.MANAGE_SETTINGS,
      ]}
      fallback={fallback}
    >
      {children}
    </PermissionGuard>
  );
}

// Convenience component for vesting-only features
export function VestingGuard({ children, fallback }: { children: React.ReactNode; fallback?: React.ReactNode }) {
  return (
    <PermissionGuard
      permissions={[Permission.VIEW_MY_VESTING, Permission.CLAIM_VESTING]}
      fallback={fallback}
    >
      {children}
    </PermissionGuard>
  );
}